<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>智能文本分析及质检系统</title>
    <link rel="stylesheet" href="../../assert/css/subpagesCss/login.css"
          th:href="@{/assert/css/subpagesCss/login.css}"/>
    <link rel="stylesheet" href="../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link href="../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
</head>
<body>
<div class="head">
    <img src="../../assert/image/logo.png" alt="">
</div>
<div class="content-box">
    <div class="box">
        <div class="img_left"></div>
        <div class="login_right">
            <div class="login-box">
                <div class="tab-title">
                    <ul>
                        <li class="on">用户名登录</li>
                        <li>手机号登录</li>
                    </ul>
                </div>
                <form action="#" id="loginFrom" method="post" class="login-form form-g">
                    <input type="text" value="1" style="position:absolute;z-index:-1;"
                           autocomplete="off"/>
                    <input type="password" value="1" style="position:absolute;z-index:-1;"
                           autocomplete="off"/>
                    <div class="tab-content tab-content1 on">
                        <div class="row_box">
                            <span class="userIcon"></span>
                            <input name="username" type="text" id="username" class="userInput" autocomplete="off"
                                   placeholder="用户名"/><br/>
                        </div>
                        <div class="row_box">
                            <span class="pwdIcon"></span>
                            <input name="password" id="password" type="password" class="userInput" autocomplete="off"
                                   placeholder="密码"/>
                        </div>
                        <div class="row_box">
                            <input name="loginimgcode" id="codeImgT" type="text" autocomplete="off" class="noTu"
                                   placeholder="请输入验证码" style="width: 150px;"/>
                            <span class="code_icon"><img src="" id="codeImgP" alt="" height="42px" width="135px"
                                                         style="cursor: pointer;"></span>
                        </div>
                        <div class="keep_box">
                            <a href="" data-url="rest/page/forgetPwd" id="forgetPwd">忘记密码？</a>
                        </div>
                        <button id="loginBut" class="loginBut" type="button">登录</button>
                    </div>
                    <div class="tab-content tab-content2">
                        <div class="row_box">
                            <input name="phone" type="text" id="phone" class="noTu" autocomplete="off"
                                   placeholder="请输入手机号"/><br/>
                        </div>
                        <div class="row_box">
                            <input name="code" id="code" type="text" autocomplete="off" class="noTu"
                                   placeholder="请输入验证码" style="width: 150px;"/>
                            <span class="code_icon" style="left: 137px;">获取验证码</span>
                        </div>
                        <div class="keep_box">

                        </div>
                        <button class="loginBut" type="button">登录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<a id="basePath" th:href="@{/}"></a>
<script src="../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../assert/js/jsencrypt.min.js" th:src="@{/assert/js/jsencrypt.min.js}"></script>
<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    $(function () {
        //页面整体长宽渲染
        htmlRendering.init();
        //输入框和按钮样式加载
        style.init();
        //登录页面不被套用
        loginNest.init();
        //用户登录
        loginAjax.init();
        //忘记密码跳转
        var url = $("#forgetPwd").attr("data-url");
        $("#forgetPwd").attr("href", basePath + url);
    });
    //用户登录
    var loginAjax = {
        init: function () {
            loginAjax.loginBut();
            loginAjax.getCode();
            $("#codeImgP").on("click", function () {
                loginAjax.getCode();
                $("#codeImgT").val("");
            })
        },
        loginBut: function () {
            $("#loginBut").click(function () {
                if ($("#username").val() == "") {
                    toastrCog.error("请输入用户名", 3000);
                    return
                }
                if ($("#password").val() == "") {
                    toastrCog.error("请输入密码", 3000);
                    return
                }
                // 获取加密公匙
                $.get(basePath + "rest/user/pass/key", function (data) {
                    if (data != "") {
                        var encrypt = new JSEncrypt();
                        encrypt.setPublicKey(data);
                        // 加密后密码
                        var inputPass = $("#password").val();
                        var encrypted = encrypt.encrypt(inputPass);
                        $("#password").val(encrypted);
                        var data = $('#loginFrom').serialize();
                        var url = basePath + "rest/user/login";
                        $.post(url, data, function (result) {
                            if (result.code == -1) {
                                toastrCog.error(result.msg, 3000);
                                loginAjax.getCode();
                                $("#codeImgT").val("");
                                // 登录失败 还原为用户输入的密码
                                $("#password").val(inputPass);
                            } else {
                                location.href = basePath + "rest/user/logins";
                            }
                        });
                    }
                })
            });
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    $("#loginBut").click();
                }
            })
        },
        getCode: function () {
            $.get(basePath + "/rest/common/getValidateCode", function (result) {
                $("#codeImgP").attr("src", "data:image/jpg;base64," + result)
            });
        }
    };
    //登录页面不被套用
    var loginNest = {
        init: function () {
            if (window.top != window.self) {
                window.top.location = window.self.location;
            }
        }
    };
    //页面整体长宽渲染
    var htmlRendering = {
        init: function () {
            htmlRendering.rendering();
            $(window).resize(function () {
                htmlRendering.rendering();
            })
        },
        rendering: function () {
            $("body").height($(window).height());
            $(".content-box").height($("body").height() - 200);
        }
    };
    //输入框和按钮样式加载
    var style = {
        init: function () {
            style.inputStyle();
            style.btnStyle();
            style.tab();
        },
        inputStyle: function () {
            var inputs = $('input');
            for (var i = 0; i < inputs.length; i++) {
                $(inputs[i]).on('focus', function () {
                    $(this).addClass("on");
                }).on('blur', function () {
                    $(this).removeClass("on");
                })
            }
        },
        btnStyle: function () {
            var btns = $("button");
            btns.each(function () {
                $(this).hover(function () {
                    $(this).addClass("on");
                }, function () {
                    $(this).removeClass("on");
                })
            });
        },
        tab: function () {
            $(".tab-title li").on("click", function () {
                var index = $(this).index() + 1;
                $(this).addClass("on").siblings("li").removeClass("on");
                $(".tab-content").removeClass("on");
                $(".tab-content" + index).addClass("on");
            })
        }
    };
</script>

</body>
</html>